<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="请假类型">
        <el-select v-model="form.leaveType" placeholder="请选择">
          <el-option
            v-for="item in leaveTypeData"
            :key="item.value"
            :label="item.lable"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="form.starttime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="form.endtime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item class="w-3/4" label="请假理由">
        <el-input type="textarea" v-model="form.reason"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        leaveType: '',
        starttime: '',
        endtime: '',
        reason: '',
        u_id: ''
      },
      leaveTypeData: [
        { label: '外出', value: '外出' },
        { label: '生病', value: '生病' },
        { label: '娱乐', value: '娱乐' }
      ]
    }
  },
  methods: {
    async onSubmit () {
      const { data: result } = await this.$Axios.post('leave', this.form)
      console.log(result)
      if (result.code) {
        this.$toast.success('提交成功！')
        this.$emit('setActive', 'LeaveRecord')
        this.form = {
          leaveType: '',
          starttime: '',
          endtime: '',
          reason: '',
          u_id: ''
        }
      } else {
        this.$toast.fail('提交失败')
      }
    }
  },
  created () {
    this.form.u_id = this.$store.getters.user.stu_id
  },
}
</script>